<template>
	<view class="bidding">
		<view class="backgroud"></view>
		<view class="form-content">
			<view class="form">
				<uni-section title="做家政" type="line">
					<view class="content">
						<uni-forms ref="form"  :modelValue="data">
							<uni-forms-item label="姓名 : " required  name="name">
								<input type="text" v-model="data.name" >
							</uni-forms-item>
							<uni-forms-item label="手机号码 : " required name="mobile">
								<input type="text" v-model="data.mobile">
							</uni-forms-item>
							<uni-forms-item label="意向岗位 :" required>
							</uni-forms-item>
							<view class="box">
								<text class="text" v-for="item in stationList" :key="item.id" 
										@click="addStation(item)" :class="{active: item.active}">
									{{item.text}}
								</text>
							</view>
							<uni-forms-item label="已获证书 :" required>
							</uni-forms-item>
							<view class="box">
								<text class="text" v-for="item in certificateList" :key="item.id" 
										@click="addCertificate(item)" :class="{active: item.active}">
									{{item.text}}
								</text>
							</view>
							<uni-forms-item label="籍贯 :" >
								<input type="text" v-model="data.jiguan">
							</uni-forms-item>
							<uni-forms-item label="现居住地址 :" >
								<input type="text" v-model="data.address">
							</uni-forms-item>
							<uni-forms-item label="意向家政公司 :" >
								<picker @change="bindPickerChange" :value="companyIndex" :range="companyList">
										<view class="uni-input">{{companyList[companyIndex]}}</view>
									</picker>
							</uni-forms-item>
							<uni-forms-item label="备注信息 :" >
								<input type="text" v-model="data.postscript">
							</uni-forms-item>
						</uni-forms>
					</view>
				</uni-section>
			</view>
			<view class="submit" @click="submit">
				提交资料
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rules:{
					name:{
						rules: [{
							required: true,
							errorMessage: '名字不能为空'
						}]
					},
					mobile:{
						rules: [{
							required: true,
							errorMessage: '手机号码不能为空'
						},{
							validateFunction:(rule,value,data,callback)=>{
								if(!/^1[3-9][0-9]{9}$/.test(value)){
									callback('手机号码输入不规范')
									return false
								}else return true
							}
						}]
					}
				},
				stationList:[
					{id:0,text:'月嫂',active:false},
					{id:1,text:'育婴师',active:false},
					{id:2,text:'保洁/清洁',active:false},
					{id:3,text:'保姆',active:false},
					{id:4,text:'产康师',active:false},
					{id:5,text:'早教/托育',active:false},
					{id:6,text:'养老/陪护',active:false},
					{id:7,text:'家装/搬家',active:false},
					],
				certificateList:[
					{id:0,text:'月嫂证',active:false},
					{id:1,text:'育婴师证',active:false},
					{id:2,text:'小儿推拿证',active:false},
					{id:3,text:'保姆证',active:false},
					{id:4,text:'保育员证',active:false},
					],
				companyIndex:0,
				companyList:[ "美宜家家政公司" , "巧家家政公司", "广佳家政公司",'尚辰家政公司'],
				data:{
					name:'',
					mobile:'',
					station:[],
					certificate:[],
					jiguan:'',
					address:'',
					company:'',
					postscript:''
				}
				
			};
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods:{
			addStation(item){
				const index = this.data.station.findIndex(obj=>obj.id===item.id)
				if(index<0) this.data.station.push(item)
				else this.data.station=this.data.station.filter(obj=>obj.id!=item.id)
				this.stationList.forEach(obj=>obj.id===item.id?obj.active=!obj.active:'')
			},
			addCertificate(item){
				const index = this.data.certificate.findIndex(obj=>obj.id===item.id)
				if(index<0) this.data.certificate.push(item)
				else this.data.certificate=this.data.certificate.filter(obj=>obj.id!=item.id)
				this.certificateList.forEach(obj=>obj.id===item.id?obj.active=!obj.active:'')
			},
			submit(){
				this.$refs.form.validate().then(ok=>{
					if(this.data.station.length>0 && this.data.certificate.length>0){
						// this.data.company = this.companyList.find(obj=>obj.value===this.companyIndex).text
						
						console.log(this.data);
						uni.navigateBack({
							delta:1
						})
						uni.showToast({
							title:'提交成功！'
						})
					}else{
						uni.showToast({
							icon:'none',
							title:'请选择岗位和证书'
						})
					}
				}).catch(err=>{
					console.log('err',err);
				})
			},
			bindPickerChange(e){
				this.companyIndex=+e.detail.value
				this.data.company=this.companyList[this.companyIndex]
			}
		}
	}
</script>

<style lang="scss">
.bidding{
	font-size: 28rpx;
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	.backgroud{
		width: 100%;
		height: 80rpx;
		background-color: #3F51B5;
	}
	.form-content{
		position: absolute;
		top: 20rpx;
		left: 0rpx;
		right: 0rpx;
	}
	.form{
		margin: 20rpx;
		padding-bottom: 1rpx;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.content{
		margin: 0 34rpx 34rpx 34rpx;
		font-size: 26rpx;
		.uni-forms-item__content{
			display: flex;
			align-items: center;
			// flex: none;
		}
		.uni-forms-item{
			display: flex;
			justify-content: space-between;
			border-top: 1rpx solid #eee;
			margin: 0;
			padding: 10rpx 0;
		}
		.uni-select {
			border: none;
			min-width: 220rpx;
		}
		.input{
			height: 100%;
			width: 100%;
		}
		.company-select{
			width: 250rpx;
		}
		
	}
	.box{
		width: 100%;
		height: 140rpx ;
		display: flex;
		justify-content: start;
		align-items: center;
		flex-wrap: wrap;
		padding-bottom: 10rpx;
		.text{
			display: inline-block;
			min-width: 60rpx;
			font-size: 20rpx;
			line-height: 45rpx;
			padding: 0 20rpx;
			color: #666;
			border: 1rpx solid #666;
			border-radius: 30rpx;
			margin-right: 30rpx;
			text-align: center;
		}
		.active{
			color: #fff;
			border: 1rpx solid #3F51B5;
			background-color: #3F51B5;
		}
	}
	.submit{
	
		line-height: 100rpx;
		text-align: center;
		background-color: #3F51B5;
		color: #fff;
	
	}
}
</style>
